<style lang="less">
    @import "bankArriveManagement.less";
</style>
<template>
    <div>
        <Card>
            <Row>
                <Form  ref="searchForm" :model="searchForm" inline :label-width="90" class="search">
                    <div class="search">
                        <Row>
                            <Col align="left">
                                <Form-item label="账号" prop="account">
                                    <Input type="text" v-model="searchForm.account" clearable placeholder="请输入账号"/>
                                </Form-item>
                                <Form-item label="银行" prop="bankCode">
                                    <Select v-model="searchForm.bankCode"  clearable placeholder="请选择银行">
                                        <Option v-for="item in dataDic.repaymentBank" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="状态" prop="status">
                                    <Select v-model="searchForm.status"  clearable placeholder="请选择状态">
                                        <Option v-for="item in dataDic.validOrInvalid" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                        </Row>
                    </div>
                    <Row>
                        <Col align="middle">
                            <Form-item>
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                            </Form-item>
                        </Col>
                    </Row>
                    <Row class="operation">
                        <Button @click="addBankAccount" type="primary" icon="md-add">新增</Button>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               @on-selection-change="showSelect" ref="action">
                            <template slot-scope="{ row, index }" slot="id">
                                <Button type="primary" size="small" @click="editBankAccount(row)">编辑</Button>
                                <Button type="primary" size="small" @click="deleteBankAccount(row)">删除</Button>
                                <Button v-show="row.status == 'invalid'"
                                        type="success" size="small" @click="takeValid(row)">生效</Button>
                                <Button v-show="row.status == 'valid'"
                                        type="error" size="small" @click="takeInvalid(row)">失效</Button>
                            </template>
                            <template slot-scope="{ row, index }" slot="bankCode">
                                <span>{{setDictTitleByType("bankCode",row.bankCode)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="status">
                                <span>{{setDictTitleByType("validOrInvalid",row.status)}}</span>
                            </template>

                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Form>
            </Row>
        </Card>
        <Modal
            :title="modalTitle"
            v-model="modalVisible"
            :mask-closable="false"
            :width="500"
            :styles="{top: '90px'}"
        >
            <Form ref="form" :model="form" :label-width="100" :rules="formValidate">
                <FormItem label="银行" prop="bankCode">
                    <Select v-model="form.bankCode"  clearable placeholder="请选择银行">
                        <Option v-for="item in dataDic.repaymentBank" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="分支行名称" prop="branchBankName">
                    <Input v-model="form.branchBankName"/>
                </FormItem>
                <FormItem label="电子联行号" prop="ebankCode">
                    <Input v-model="form.ebankCode"/>
                </FormItem>
                <FormItem label="账号" prop="account">
                    <Input v-model="form.account"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="modalVisible=false">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    import {
        getByTypes
    } from "_p/basic/api/admin/datadic";
    import {
        queryBankList,
        updateBankAccountStatus,
        deleteBankAccountStatus,
        addSubmit,
        editSubmit
    } from "@/projects/basic/api/contract/bank-arrive/bankManagement";

    export default {
        name: "bank-management",
        comments:{
        },
        data() {
            return {
                modalTitle:"",
                modalVisible:false,
                modalType:"",
                submitLoading: false, // 添加或编辑提交状态
                form:{
                    bankCode:"",
                    branchBankName:"",
                    ebankCode:"",
                    account:""
                },
                formValidate: {
                    // 表单验证规则
                    bankCode: [{required: true, message: "不能为空", trigger: "change"}],
                    branchBankName: [{required: true, message: "不能为空", trigger: "blur"}],
                    account: [{required: true, message: "不能为空", trigger: "blur"}]
                },
                searchForm:{account:"",bankCode:"",status:""},
                data:[],
                total: 0,
                dicKeys: [
                    "bankCode","validOrInvalid","repaymentBank"
                ],
                dataDic:{},
                loading: false,
                columns: [
                    {title: "操作",key: "id",minWidth: 200,align: "center",slot: "id",fixed:"left",slot: "id"},
                    {title: "银行名称",key: "bankCode",minWidth: 160,align: "center",slot:"bankCode"},
                    {title: "分支行名称",key: "branchBankName",minWidth: 150,align: "center"},
                    {title: "电子联行号",key: "ebankCode",minWidth: 150,align: "center"},
                    {title: "账号",key: "account",minWidth: 150,align: "center"},
                    {title: "状态",key: "status",minWidth: 150,align: "center",slot: "status"},
                    {title: "生效时间",key: "startTime",minWidth: 150,align: "center"},
                    {title: "失效时间",key: "endTime",minWidth: 150,align: "center"},
                ]
            }
        },
        methods:{
            takeInvalid(v){
                let params = {
                    id:v.id,
                    status:"invalid"
                }
                this.changeStatus(params);
            },
            takeValid(v){
                let params = {
                    id:v.id,
                    status:"valid"
                }
                this.changeStatus(params);
            },
            changeStatus(params){
                updateBankAccountStatus(params).then(res => {
                    if (res.code === "0000") {
                        this.$Message.success(res.data);
                        this.getBankList();
                    }
                });
            },
            deleteBankAccount(v){
                let params = {
                    id:v.id
                }
                deleteBankAccountStatus(params).then(res => {
                    if (res.code === "0000") {
                        this.$Message.success(res.data);
                        this.getBankList();
                    }else{
                        this.$Message.error(res.data);
                        this.getBankList();
                    }
                }).catch(e => {
                    this.getBankList();
                });
            },
            editBankAccount(v){
                this.modalType = 1;
                this.$refs.form.resetFields();
                // 转换null为""
                for (let attr in v) {
                    if (v[attr] === null) {
                        v[attr] = "";
                    }
                }
                let str = JSON.stringify(v);
                let data = JSON.parse(str);
                this.form = data;
                this.modalTitle = "银行账号信息编辑";
                this.modalVisible = true;
            },
            addBankAccount(v){
                this.modalType = 0;
                this.$refs.form.resetFields();
                this.modalTitle = "新增银行账号信息";
                this.modalVisible = true;
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if (this.modalType === 0) {
                            // 添加 避免编辑后传入id等数据 记得删除
                            delete this.form.id;
                            addSubmit(this.form).then(res => {
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getBankList();
                                    this.modalVisible = false;
                                }
                            });
                        } else if (this.modalType === 1) {
                            // 编辑
                            editSubmit(this.form).then(res => {
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getBankList();
                                    this.modalVisible = false;
                                }
                            });
                        }
                        this.submitLoading = false;
                    }
                });
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getBankList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";

                // 重新加载数据
                this.getBankList();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getBankList();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getBankList();
            },
            initDataDic(){
                let self = this;
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === "0000" && res.data) {
                        self.dataDic = res.data;
                    }
                });
            },
            getDic(v){
                let dic = []
                switch(v) {
                    case "bankCode":
                        dic = this.dataDic.bankCode;
                        break;
                    case "validOrInvalid":
                        dic = this.dataDic.validOrInvalid;
                        break;
                    default:
                }
                return dic;
            },
            setDictTitleByType(v1,v2){
                let dic = {}
                if(!this.getDic(v1)) return '';
                this.getDic(v1).forEach(column => {
                    if(column.value === v2){
                        dic = column;
                    }
                });
                return dic.title;
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            getBankList() {
                // 多条件搜索任务列表
                this.loading = true;
                queryBankList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
                this.selectCount=0;
            },
            init(){
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getBankList();
            },
        },
        mounted() {
            this.initDataDic();
            this.init();
        }
    }
</script>

<style scoped>

</style>
